<template>
  <div class="modal fade" id="myModal" ref="model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div v-if="showLogin" class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">登陆</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">username</label>
              <input type="text" class="form-control" v-model="userName" id="exampleInputEmail1" placeholder="username">
            </div>
            <div class="progress" v-show="errorTip">
              <div class="progress-bar text-left" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                   aria-valuemax="100"
                   style="width: 100%;">
                请输入用户名
              </div>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" v-model="userPwd" id="exampleInputPassword1"
                     placeholder="Password" @keyup.enter="login">
            </div>
            <div class="progress " v-show="errorTip">
              <div class="progress-bar text-left" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                   aria-valuemax="100"
                   style="width: 100%;">
                密码不能为空
              </div>
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-primary" @click="login">登陆</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Login2",
    props:['isLogin'],
    data() {
      return {
        userName: '',
        userPwd: '',
        errorTip: false,
        showLogin:true
      }
    },
    watch:{
      isLogin:function (n) {
         this.showLogin = n;
      }
    },
    methods: {
      login: function () {
        var self = this;
        if (!this.userName || !this.userPwd) {
          this.errorTip = true;
        } else {
          axios.post("/users/login", {
            userName:this.userName,
            userPwd:this.userPwd,
          }).then(function (res) {
             console.log(res);
            var res = res.data;
            if (res.status == '0') {
              self.errorTip = false;
              var nickname = res.result.userName;
              self.$emit('changename',nickname);
              self.$store.commit("updateUserInfo",nickname)
              self.getCartCount();
            } else {
              self.errorTip = true;
            }
          })
        }
      },
      getCartCount(){
        var self= this;
        axios.get("/users/getCartCount").then(function (res) {
          var res = res.data;
          console.log(res);
          //防止累加
          self.$store.commit("initCartCount",res.result)
        })
      }
    }
  }
</script>

<style scoped>

</style>
